<template>
    <div id="left-chart">
      <h2>
        基础设施类型数量统计
      </h2>
      <div class="box">
        <span class="icon top-left-icon"></span>
        <span class="icon top-right-icon"></span>
        <span class="icon bottom-left-icon"></span>
        <span class="icon bottom-right-icon"></span>
       <div id="infrastPie"></div>
        <ul>
          <li v-for="(item,index) in infrastructureList" :key="item.typeid">
            <div class="infrastBar" :style="{background:colors[index]}"></div>
            <span class="infrastName">{{item.type}}</span>
            <span class="infrastCount">{{item.count}}</span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import CarType from '../sub-home/carType.vue'
  import EnergyChart from '../sub-home/energyChart.vue'
  import OnlineChart from '../sub-home/onlineChart.vue'
  import WarnChart from '../sub-home/warnChart.vue'
    export default {
        name: 'LeftChart',
        data () {
            return {
              infrastPie:'',
              colors:['#d75337','#d27338','#e6b64d','#2fa679','#07a8bf','#3f62ea','#896bda','#95c13e','#0d92d2','#59a04b','#d54138','#5e5cc0','#0b9cf4', '#369c65'],
            }
        },
      props:{
        infrastructureList:{
          type: Array
        },
      },
      mounted(){
        //this.pieInit();
      },
      watch:{
        infrastructureList: function () {
          this.pieInit(this.infrastructureList);
        }
      },
      methods:{
          pieInit(dataList){
            var _this = this;
            let seriesData = [];
            var i = 0;
            dataList.forEach(function (item) {
              let itemData = {value:item.count,
                              name:item.type,
                              itemStyle:{normal:{color: _this.colors[i]}}
                              };
              seriesData.push(itemData);
              i++;
            })
            this.infrastPie = echarts.init(document.getElementById("infrastPie"));
            let option = {
              title : {},
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series : [
                {
                  name: '',
                  type: 'pie',
                  radius : '90%',
                  /*center: ['50%', '60%'],*/
                  label:{
                    normal: {
                      show:false
                    }
                  },
                  data:seriesData,
                }
              ]
            };
            this.infrastPie.setOption(option);
          },
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
    #left-chart {
      position: absolute;
      top: 0;
      left: 0px;
      width: 460px;
      height: 50%;
      pointer-events: auto;
      box-sizing: border-box;
      margin-bottom: 10px;
      h2 {
        @include linearTitle;
      }
      .box {
        position: relative;
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        @include borderBlur;

        ul{
          width: 50%;
          height: auto;
          display: inline-block;
          vertical-align: middle;
          list-style-type: none;
          text-align: left;
          margin: 0;
          padding: 0;

          li{
            width: 100%;
            padding: 0;
            margin: 12px 0;
            position: relative;
            span{
              &.infrastName{
                display: inline-block;
                width: 165px;
                line-height: 18px;
                font-size:  $font-normal;
                font-family: "Microsoft YaHei UI";
                color: #d6e0f2;
                margin-left: 10px;
              }
              &.infrastCount{
                display: inline-block;
                line-height: 18px;
                font-size: $font-mid;
                font-family: "ds-digitalbold-webfont";
                color: #05d6c9;
                position: absolute;
                right: 2px;
              }
            }
            .infrastBar{
              display: inline-block;
              width: 20px;
              height: 15px;
            }
          }
        }
        #infrastPie{
          display: inline-block;
          vertical-align: middle;
          width: 47%;
          height: 100%;
          margin: 0;
          padding: 0;
        }
        .icon {
          position: absolute;
          z-index: 10;
          width: 14px;
          height: 14px;
          &.top-left-icon {
            top: -2px;
            left: -2px;
            background: url("../../../static/images/index/top-left.png") no-repeat left top;
          }
          &.top-right-icon {
            top: -2px;
            right: -2px;
            background: url("../../../static/images/index/top-right.png") no-repeat right top;
          }
          &.bottom-left-icon {
            bottom: -2px;
            left: -2px;
            background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
          }
          &.bottom-right-icon {
            bottom: -2px;
            right: -2px;
            background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
          }
        }
      }
    }
</style>
